<template>
	<div class="more-group">
	<!-- 	<h2 class="pt30rem pb30rem fs34rem c333 bold align-center border-b">可参加的团</h2> -->				
		<ul class="pl30rem pr30rem" v-infinite-scroll="loadData" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-if="flag">
			<li class="layout pt25rem pb25rem border-b" v-for="item in ListData">
				<img class="list-left" :src="img_url + item.user_headimg" alt="">
				<div class="list-mid flex_1 flex-column ml30rem">
					<p class="ellipsis fs32rem">{{ item.nickname }}</p>
					<div class="list-mid-bottom layout-juscon mt10rem">
						<p class="flex-center fs24rem">还差<span class="cxo-red-color">1人</span>拼成
						</p>
					</div>
				</div>
				<div class="list-right flex-column flex-center align-center">
					<button class=" white fs28rem align-center mb10rem cxo-red"  @click="offeredShare(item)" v-if="item.button== '1'">去邀请</button>
					<button class=" white fs28rem align-center mb10rem cxo-red"  @click="offered(item)" v-if="item.button=='0'">去参加</button>
					<p class="fs24rem c66 layout" v-if="item.time > 0">剩余<countdown :data="item.time"  :type="countdownType"></countdown></p>
				</div>
			</li>
		</ul>
		<template v-else>
			<default :imgUrl="img" explain='暂无拼团信息'></default>
		</template>		

		<!-- 选择颜色分类尺寸 -->
		<popup v-model="popupVisible" position="bottom" class="w100">
			<div class="pl30rem pr30rem pb20rem" v-if="data">
				<div class="shop flex-left pt30rem pb30rem border-b">
					<img :src="specificationImg"  alt="">
					<div class="shop-text ml30rem">
						<p class="fs28rem c333 mb20rem bold">{{ data.goods_name }}</p>
						<span class="fs28rem c999" v-if="stock">库存:{{ stock }}</span>	
						<span class="fs28rem c999" v-else>库存:{{ data.stock }}</span>	
						<span class="block fs28rem c999 mb25rem" v-if="selectString <= 1">请选择规格数量</span>
						<span class="block fs28rem c999 mb25rem" v-else>规格：{{ selectString }}</span>
						<strong class="fs30rem red" v-if="price">￥{{ price }}</strong>
						<strong class="fs30rem red" v-else>￥{{ data.price }}</strong>
					</div>
				</div>
				<div class="couponList">
					<div class="specification">
						<div v-for="(item,n) in data.spec_list">
							<h3 class="pt15rem pb15rem fs30rem c333">{{ item.spec_name}}</h3>
							<ul class="flex-left pt15rem pb15rem border-b">
								<li class="fs28rem c333 border circle-8 pt15rem pb15rem pl25rem pr25rem mr15rem" :class="{ on : subIndex[n] == index }" v-for="(items,index) in item.value" @click="selectCate(items,n,index)">{{ items.spec_value_name }}
								</li>
							</ul>
						</div>
					</div>
					<div class="mt30rem mb30rem">
						<h3 class="pt15rem pb15rem fs30rem c333">数量</h3>
						<div class="layout quantity">
							<i class="iconfont icon-jian1" v-if="quantity == 1"></i>
							<i class="iconfont icon-jian1" @click="quantity--" v-else></i>
							<input type="text" v-model="quantity">
							<i class="iconfont icon-jia1" @click="quantity++"></i>
						</div>
					</div>
					<button class="btn w100 align-center block cxo-red fs34rem white circle-8" @click="ascertain()">确定</button>
				</div>
			</div>
		</popup>
		<div class="help-share" v-show="shareShow" @click="shareShow = false">
			<ul class="flex-left pt30rem pb30rem" v-if='showApp'>
				<li @click="share('wechat')">
					<i class="iconfont icon-weixin1 wechat auto"></i>
					<span>微信</span>
				</li>
				<li @click="share('friends')">
					<i class="iconfont icon-pengyouquan circle auto"></i>
					<span>朋友圈</span>
				</li>
				<!-- <li>
					<i class="iconfont icon-qq qq"></i>
					<span>QQ</span>
				</li>
				<li>
					<i class="iconfont icon-weibo weibo"></i>
					<span>微博</span>
				</li> -->
			</ul>
			<img src="../../../assets/share.png" alt="" style="pointer-events: none;" v-else>
		</div>
	</div>
</template>

<script>
	import { joinList,getWechatConfig,getgroupShare } from "@/api/goods-detail";
	import Default from "@/components/Default";
	import Countdown from "@/components/Countdown";
	import $toast 		from '@/utils/toast';
	import { InfiniteScroll,Popup } from 'mint-ui';	
	export default{
		components: 
		{
			Countdown,
			Default,
			Popup
		},
		directives:{
			InfiniteScroll
		},
		data()
		{
			return{
				selectString     : '',
				parameterName    : '',
				sku_id           : '',
				stock            : '',
				price            : '',
				specificationImg : '',
				coupon_id        : '',
				fuid             : '',
				canselect        : [],
				jionListData     : [],
				ListData         : [],
				page_index       : 1,
				quantity         : 1,
				popupVisible     : false,
				shareShow        : false,
				loading          : false,
				flag             : true,
				countdownType    : true,
				img_url          : process.env.IMG_URL,
				goods_id         : this.$route.query.goods_id,
				uid              : window.localStorage.getItem('uid'),
				showApp          : window.sessionStorage.getItem('isapp'),
				data             : this.$store.state.commodity_data,
				img              : require('../../../assets/icon-goods2.png'),
			}
		},
		watch:
		{
			selectString(newVal)
			{
				this.canselect = this.data.sku_list.filter(res => res.sku_name.indexOf(newVal)>-1);
				if(this.canselect.length == 1)
				{
					this.price = this.canselect[0].price;
					this.stock = this.canselect[0].stock;
					this.sku_id = this.canselect[0].sku_id;
				}
				else
				{
					this.price = '';
					this.stock = '';
					this.sku_id = '';
				}
			}
		},
		methods:
		{
			loadData()
			{
				this.loading = true;

				var params = {
					uid        : window.localStorage.getItem('uid'),
					goods_id   : this.goods_id,
					page_index : this.page_index++,
					page_size  : 10,
				}
				joinList(params).then( res => {
					this.jionListData = res.data.list;
					if( res.data.list.length > 0 )
					{
						this.specificationImg = this.img_url + res.data.list[0].user_headimg;
						this.ListData = this.ListData.concat(res.data.list);
						this.loading = false;
					}
					else if (params.page_index > 1)
						$toast('没有更多了');
					else
						this.flag = false;
					if(res.data.list.length < params.page_size)
						this.loading = true;
				})
			},
				// 规格选中
			selectCate(item,n,index)
			{ 
				if (this.selectArr[n] != item.spec_value_name) 
				{
	                this.selectArr[n] = item.spec_value_name;
	                this.subIndex[n] = index;
	            }
	            else
	            {
	                this.selectArr[n] = "";
	                this.subIndex[n] = -1; //去掉选中的颜色 
            	}
				this.$forceUpdate();
				this.selectString = this.selectArr.join(' '); 
				if(item.spec_img)
					this.specificationImg = this.img_url + item.spec_img;
			},
			//判断规格，库存。
			ascertain()
			{
				if(this.data.spec_list.length > 0 && this.data.stock > 0 )
				{
					if(this.canselect.length != 1)
						return $toast('请选择规格数量');

					if(this.parameterName == 'offered')
						return this.offered();

					return this.popupVisible = false;
				}
				else
				{
					if(this.data.stock > 0){
						this.sku_id = this.data.sku_list[0].sku_id;
					}
					else
					{
						this.popupVisible = false;
						return $toast('库存不足');
					}

					if(this.parameterName == 'offered')
						return this.offered();

					return this.popupVisible = false;
				}
			},
			// 参团支付
			offered(item)
			{
				if(item)
				{
					this.fuid = item.uid;
					this.parameterName = 'offered';
				}
				if(!this.sku_id)
				{
					this.price = this.data.ping_price;
					return this.popupVisible = true;
				}
				else
				{
					var skuList = this.sku_id+':'+this.quantity;
					this.$store.dispatch("skuidList", skuList);
					this.$router.replace('/shopping/group-pay?fuid=' + this.fuid +'&ping=1')
				}
			},
			offeredShare(item)
			{
				let url = location.href.split('#')[0] //获取锚点之前的链接
				getWechatConfig(url).then(response => {
			        let res = response.data;
			        this.groupShare(res);
			        this.shareShow = true;
		        });
			},
			groupShare(resData)
			{
				wx.config({
				    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				    appId: resData.appId, // 必填，公众号的唯一标识
				    timestamp: resData.timestamp, // 必填，生成签名的时间戳
				    nonceStr: resData.nonceStr, // 必填，生成签名的随机串
				    signature: resData.signature,// 必填，签名
				    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
				});
				let paramsLike = {
					type     : '1',
					goods_id : this.goods_id,
					uid      : this.uid
				}
				getgroupShare(paramsLike).then(res => {
					let url = location.href.split('#')[0];
					let links = res.data.url;
					console.log(links)
			        let title = res.data.title;
			        let desc = res.data.content;
			        let imgUrl = res.data.img;
					wx.ready(()=>{
						wx.onMenuShareTimeline({
				            title: title, // 分享标题
				            desc: desc, // 分享描述
				            link: links, // 分享链接
				            imgUrl: imgUrl, // 分享图标
				            success: function() {
				              	alert("分享到朋友圈成功")
				            },
				            cancel: function() {
				              	alert("分享失败,您取消了分享!")
				            }
				          });
				          //微信分享菜单测试
				          wx.onMenuShareAppMessage({
				            title: title, // 分享标题
				            desc: desc, // 分享描述
				            link: links, // 分享链接
				            imgUrl: imgUrl, // 分享图标
				            success: function() {

							},
							cancel: function() {
								
							}
						});
					})
				});
			},
		}
	}
</script>

<style lang="less">
	.more-group{
		ul
		{
			li
			{
				&:last-child
				{
					border-bottom:initial;
				}
				img
				{
					width: 100/28rem;
					height: 100/28rem;
					border-radius: 50%;
					object-fit: cover;
				}
				.list-right
				{
					button
					{
						width: 200/28rem;
						padding-top: 10/28rem;
						padding-bottom: 10/28rem;
						border-radius: 8px;
					}
				}
			}
		}
		.mint-popup{
			.shop{
				img{
					width: 200/28rem;
					height: 160/28rem;
					object-fit: cover;
				}
			}
			.specification{
				ul{
					li{
						border-color:#666;
					}
					.is-on{
						border-color: #ff0036;
						color: #ff0036;
					}
				}
			}
			.quantity{
				width: 200/28rem;
			}
			button{
				height: 90/28rem;
				line-height: 90/28rem;
			}
		}
		.help-share
		{
			z-index: 99;
			position: fixed;
			bottom: 0;
			left: 0;
			background: rgba(0,0,0,.8);
			width: 100%;
			height: 100%;
			img
			{
				width: 100%;
				display: block;
			}
			ul
			{
				position:fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				background: #fff;
				li
				{
					text-align: center;
					i
					{
						width: 100/28rem;
						height: 100/28rem;
						border-radius: 50%;
						line-height: 100/28rem;
						text-align: center;
						color: #fff;
						display: block;
						font-size: 60/28rem;
					}
					.weibo
					{
						background: #fe555f;
					}
					.wechat
					{
						background: #21cc51;
					}
					.qq
					{
						background: #65aef3
					}
					.circle
					{
						background: #9b8cc6;
					}
					span
					{
						font-size: 28/28rem;
						display: block;
						margin-top: 20/28rem;
					}
				}
			}
		}
	}
</style>